import React from 'react'
import { success, Button, Link, Select, TitleBar } from '../../ui-components'
import style from './style.authSettings'
import { connect } from 'react-redux'
import util from '../../util'

export default
@connect(({ app }) => ({ app }))
class extends React.Component {

	state = {
		editMap: {}
	}

	componentDidMount() {
		this.props.fetchRolePermissions()
	}

	componentWillUnmount() {
		this.props.resetOrg()
	}

	handleChange(e) {
		const [ resourceName, scopeName, roleName ] = e.target.value.split(',')
		this.props.syncRolePermissons({
			resourceName,
			scopeName,
			roleName
		})
	}

	toggleEdit(index) {
		this.setState({
			editMap: {
				...this.state.editMap,
				[index]: !this.state.editMap[index]
			}
    }, () => {
      if (!this.state.editMap[index]) {
        this.props.fetchRolePermissions()
      }
    })
	}

	handleUpdate(roleName, resourceName, index) {
		if (!resourceName || !roleName) return
		const find = this.props.app.rolePermissons.filter(item => item.resourceName == resourceName && item.roleName == roleName && item.default)[0]
		if (find) {
			this.props.updateRolePermissions({
				roleName: find.roleName,
				resourceCode: find.resourceCode,
				actionCode: find.actionCode,
				scope: find.scope
			}, () => {
				success('更新成功!')
				this.toggleEdit(index)
			})
		}
	}

	id(item) {
		return item.resourceName + ',' + item.scopeName + ',' + item.roleName
	}

	renderList(list) {
		return (
			<div className={style.root}>
				{
					list.map((item, i) => (
						<div 
							key={i}
						>
							<h2>{ item.showName }</h2>
							<div>
								{
									item.list.map((v, j) => {
										const active = util.find(v, item => item.default)
										return (
											<div 
												key={j}
											>
												<label>普通员工{i===1? '（高级权限）': ''}:</label>
												{
													this.state.editMap[`${i}${j}`]?(
														<div>
															<Select
																onChange={::this.handleChange}
																value={this.id(active)}
															>
																{
																	v.map((v, i) => (
																		<option 
																			key={i}
																			value={this.id(v)}
																		>{ v.scopeName }</option>
																	))
																}
															</Select>
															<Button 
																label="保存"
																onClick={() => this.handleUpdate(j==0?'staff': 'seniorStaff', item.name, `${i}${j}`)}
															/>
															<Link 
																label="取消" 
																onClick={() => this.toggleEdit(`${i}${j}`)}
															/>
														</div>
													): (
														<span>
															<span>{ active.scopeName }</span>
															<Link 
																label="修改" 
																onClick={() => this.toggleEdit(`${i}${j}`)}
																className={style.modify}
															/>
														</span>
													)
												}
											</div>
										)
									})
								}
							</div>
						</div>
					))
				}
			</div>
		)
	}

	render() {
		let { rolePermissons=[] } = this.props.app

		const map = {
			user_org: '成员团队从属可见性配置',
			report_line: '汇报关系可见性配置',
			okr: '目标可见性配置'
		}

		const list  = Object.keys(map).map(name => {
			const _list = rolePermissons.filter(item => item.resourceName === name)
			return {
				name,
				showName: map[name],
				list: [
					_list.filter(item => item.roleName === 'staff'),
					_list.filter(item => item.roleName === 'seniorStaff')
				]
			}
		})

		return (
			<div>
				<TitleBar
					label="权限配置管理"
				/>
				{ rolePermissons.length? this.renderList(list): null }
			</div>
		)
	}
}
